<template>
    <div>
        <div class="vs-table-box" v-loading="loading" style="padding: 20px 100px">
            <el-form v-loading="loading" ref="form" label-position="right" :rules="rules" class="orm-info" label-width="120px" :model="form">
                <div style="display: flex; flex-warp: warp">
                    <el-form-item label="要货单号：">
                        <el-input style="width: 200px" placeholder="系统自动生产" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="要货门店：">
                        <el-input style="width: 200px" :placeholder="userInfo.store.title" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="商品类型：" prop="two_type">
                        <el-select style="width: 200px" v-model="form.two_type" @change="two_typeChange" filterable clearable placeholder="请选择">
                            <el-option label="定制毛坯" value="1"> </el-option>
                            <el-option label="定制成品" value="2"> </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div style="margin: 20px 0">
                    <el-radio v-model="form.type" label="1" size="mini">顾客预约</el-radio>
                    <el-radio v-model="form.type" label="2" size="mini">门店备货</el-radio>
                </div>
                <div v-if="form.type == 1">
                    <div class="tit">顾客信息</div>
                    <div style="width: 450px; margin: 20px 0">
                        <el-input placeholder="请输入姓名、手机号或会员卡号（尽可能详细）" @keyup.enter.native="getUserSearch" v-model.trim="keys">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <div slot="append" @click="getUserSearch" class="search-right">
                                <i v-show="isBtn2" class="el-icon-loading"></i>
                                查找会员
                            </div>
                        </el-input>
                    </div>
                    <el-descriptions border :column="4" style="margin-top: 20px">
                        <el-descriptions-item label="姓名">
                            <el-input v-model="user.realname" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="性别">
                            <el-radio v-model="user.gender" readonly :label="1" size="mini">男</el-radio>
                            <el-radio v-model="user.gender" readonly :label="2" size="mini">女</el-radio>
                        </el-descriptions-item>
                        <el-descriptions-item label="电话">
                            <el-input :value="user.phone" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="会员卡号">
                            <el-input :value="user.vip_no" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="头围">
                            <el-input :value="user.header" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="前后">
                            <el-input :value="user.around" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="左右">
                            <el-input :value="user.about" readonly placeholder=""></el-input>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-table :key="1" :data="selectOrder.goods" border style="width: 100%; margin-top: 20px" v-if="selectOrder.goods && selectOrder.goods.length">
                        <el-table-column prop="id" label="序号" align="center" width="100"> </el-table-column>
                        <el-table-column prop="goods.number" label="商品编码" align="center"> </el-table-column>
                        <el-table-column prop="goods.title" label="商品系列" align="center"> </el-table-column>
                        <el-table-column prop="goods.roughcastInfo.title" label="毛坯种类" align="center"> </el-table-column>
                        <el-table-column prop="goods.needleInfo.title" label="递针类型" align="center"> </el-table-column>
                        <el-table-column prop="goods.sizeInfo.title" label="尺寸" align="center"> </el-table-column>
                        <el-table-column prop="goods.sexInfo.title" label="性别" align="center"> </el-table-column>
                        <el-table-column prop="goods.lengthInfo.title" label="长度" align="center"> </el-table-column>
                        <el-table-column prop="goods.colourInfo.title" label="颜色" align="center"> </el-table-column>
                        <el-table-column prop="goods.trade_price" label="要货单价" align="center"> </el-table-column>
                        <el-table-column prop="number" label="数量" align="center"></el-table-column>
                    </el-table>
                </div>

                <!-- <el-descriptions border :column="4" style="margin-top:20px" v-show="form.type==2">
            <el-descriptions-item label="姓名">
                <el-input v-model="form.name" placeholder=""></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-radio v-model="form.gender"  :label="1" size="mini">男</el-radio>
                <el-radio v-model="form.gender"  :label="2" size="mini">女</el-radio>
            </el-descriptions-item>
            <el-descriptions-item label="电话">
                <el-input v-model="form.phone"  placeholder=""></el-input>
            </el-descriptions-item>
        </el-descriptions> -->

                <div class="tit" style="margin-top: 40px">产品信息</div>
                <div style="display: flex; flex-wrap: wrap">
                    <el-form-item label="最晚到店时间：" prop="date">
                        <el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd" style="width: 200px" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="加急：" prop="urgent">
                        <el-input placeholder="请输入" @blur="urgentBlur" clearable type="number" style="width: 200px" v-model="form.urgent">
                            <template slot="append">
                                <div style="width: 40px; text-align: center">天</div>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="要货金额：" prop="price">
                        <el-input placeholder="请输入" @blur="priceBlur" clearable type="number" style="width: 200px" v-model="form.price"> </el-input>
                    </el-form-item>
                    <el-form-item label="商品系列：" prop="series_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.series_id" placeholder="请选择">
                            <el-option v-for="item in series" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="毛坯种类：" prop="blank_type_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.blank_type_id" placeholder="请选择">
                            <el-option v-for="item in blank_type" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="递针类型：" prop="needle_type_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.needle_type_id" placeholder="请选择">
                            <el-option v-for="item in needle_type" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="尺寸：" prop="size_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.size_id" placeholder="请选择">
                            <el-option v-for="item in size" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="长度：" prop="length_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.length_id" placeholder="请选择">
                            <el-option v-for="item in length" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.sex_id" placeholder="请选择">
                            <el-option v-for="item in sex" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="颜色：" prop="colour_id">
                        <el-select style="width: 200px" filterable clearable v-model="form.colour_id" placeholder="请选择">
                            <el-option v-for="item in colour" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="款号：" prop="style_id">
                <el-select style="width: 200px" filterable clearable v-model="form.style_id" placeholder="请选择">
                    <el-option v-for="item in style" :key="item.id" :label="item.title" :value="item.id"></el-option>
                </el-select>
            </el-form-item> -->
                    <el-form-item label="发型：" prop="hairstyle_id" v-if="form.two_type == 2">
                        <el-select style="width: 200px" filterable clearable v-model="form.hairstyle_id" placeholder="请选择">
                            <el-option v-for="item in hairstyle" :key="item.id" :label="item.title" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 9/16 客户说定制成品-门店备货  不需要展示这些 -->
                    <template v-if="!(form.two_type == 2 && form.type == 2)">
                        <el-form-item label="PU边类型：" prop="pu_type">
                            <el-select style="width: 200px" @change="puChange" clearable v-model="form.pu_type" placeholder="请选择">
                                <el-option label="不加" value="1"> </el-option>
                                <el-option label="前额+PU" value="2"> </el-option>
                                <el-option label="四周+PU" value="3"> </el-option>
                                <el-option label="其他" value="4"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="PU边类型说明：" prop="pu_type_content" v-if="form.pu_type == 4">
                            <el-input placeholder="请输入" clearable style="width: 200px" v-model="form.pu_type_content"></el-input>
                        </el-form-item>
                        <el-form-item
                            label="PU边厚薄度："
                            prop="pu_thickness"
                            v-if="form.pu_type && form.pu_type != 1"
                            :rules="{
                                required: form.pu_type != 1,
                                message: '请选择PU边厚薄度',
                                trigger: 'change',
                            }"
                        >
                            <el-select style="width: 200px" :disabled="form.pu_type == 1" clearable v-model="form.pu_thickness" placeholder="请选择">
                                <el-option label="薄PU" value="1"> </el-option>
                                <el-option label="NPU" value="2"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发质：" prop="hair_quality">
                            <el-select style="width: 200px" clearable v-model="form.hair_quality" placeholder="请选择">
                                <el-option label="吃酸发" value="1"> </el-option>
                                <el-option label="印度发" value="2"> </el-option>
                                <el-option label="蛋白丝" value="3"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="前额娃娃发：" prop="forehead">
                            <el-select style="width: 200px" clearable v-model="form.forehead" placeholder="请选择">
                                <el-option label="不加" value="1"> </el-option>
                                <el-option label="加" value="2"> </el-option>
                                <el-option label="加F网（肉色）" value="3"> </el-option>
                                <el-option label="加F网（黑色）" value="4"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="曲度：" prop="curvature">
                            <el-select style="width: 200px" clearable v-model="form.curvature" placeholder="请选择">
                                <el-option label="直发" value="直发"> </el-option>
                                <el-option label="1.5" value="1.5"> </el-option>
                                <el-option label="2.0" value="2.0"> </el-option>
                                <el-option label="2.5" value="2.5"> </el-option>
                                <el-option label="3.0" value="3.0"> </el-option>
                            </el-select>
                            <!-- <el-input placeholder="请输入" clearable style="width: 200px" v-model="form.curvature"></el-input> -->
                        </el-form-item>
                        <el-form-item label="前额流向：" prop="flow_to">
                            <el-select style="width: 200px" clearable v-model="form.flow_to" placeholder="请选择">
                                <el-option label="背头" value="1"> </el-option>
                                <el-option label="刘海" value="2"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="发量：" prop="hair_volume">
                            <!-- <el-input placeholder="请输入" @blur="hairBlur" clearable type="number" style="width: 200px" v-model="form.hair_volume">
                            <template slot="append">
                                <div style="width:40px;text-align:center;">%</div>
                            </template>
                        </el-input> -->
                            <el-select style="width: 200px" clearable v-model="form.hair_volume" placeholder="请选择">
                                <el-option label="-20%" value="-20"> </el-option>
                                <el-option label="-15%" value="-15"> </el-option>
                                <el-option label="-10%" value="-10"> </el-option>
                                <el-option label="-5%" value="-5"> </el-option>
                                <el-option label="正常" value="0"> </el-option>
                                <el-option label="5%" value="5"> </el-option>
                                <el-option label="10%" value="10"> </el-option>
                                <el-option label="15%" value="15"> </el-option>
                                <el-option label="20%" value="20"> </el-option>
                                <el-option label="25%" value="25"> </el-option>
                                <el-option label="30%" value="30"> </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </div>
                <el-form-item v-if="!(form.two_type == 2 && form.type == 2)" style="width: 100%" label="图片示例：" prop="images">
                    <vs-uploading width="120px" ref="uploading" v-model="form.images"></vs-uploading>
                </el-form-item>
                <el-form-item label="备注/特殊要求（打膜的大概尺寸请注明）：" label-width="300px">
                    <el-input v-model="form.remarks" type="textarea" :rows="4" style="width: 500px"></el-input>
                </el-form-item>

                <p style="color: #9d9d9d; font-size: 14px">特别提示：</p>
                <p style="color: #9d9d9d; font-size: 14px">1、未加急状态下打膜商品的周期，从门店接单开始算起，共计45天，故门店务必在接单后的24小时内将模型寄出；</p>
                <p style="color: #9d9d9d; font-size: 14px">2、由于门店压单，造成的到货延误，由门店自行负责；</p>

                <div class="vs-bottom-btns" style="margin: 50px 0; justify-content: center !important">
                    <el-button @click="utils.backPage()">返回</el-button>
                    <el-button @click="subitm" :loading="isBtn" type="primary">提交</el-button>
                </div>
            </el-form>
            <vs-select-user :isOneSelect="false" v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>

            <el-dialog title="选择订单" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible1" top="10vh">
                <el-table :data="dataList" row-key="id" v-loading="loading" max-height="530" ref="tab" class="vs-m-t-10" key="1">
                    <el-table-column type="selection" width="55" reserve-selection align="center"> </el-table-column>
                    <el-table-column prop="out_trade_no" label="订单编号" align="center"> </el-table-column>
                    <el-table-column prop="goods[0].goods_name" show-overflow-tooltip label="商品系列" align="center"></el-table-column>
                    <el-table-column prop="create_time" show-overflow-tooltip label="下单时间" align="center"></el-table-column>
                    <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer" style="display: flex; align-items: center; justify-content: center">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button @click="comfirm" type="primary" style="margin-left: 30px">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import VsUploading from '@/components/VsUploading.vue';
    import { mapState } from 'vuex';
    import { render } from 'nprogress';
    import VsSelectUser from '@/components/VsSelectUser.vue';
    export default {
        components: { VsUploading, VsSelectUser },
        computed: {
            ...mapState('user', ['userInfo']),
        },
        data() {
            return {
                keys: '',
                isBtn: false,
                loading: false,
                isBtn2: false,
                user: {},
                form: {
                    type: '1', //1顾客预约 2门店备货
                    two_type: '', // 类型：1定制毛坯，2定制成品
                    user_id: '', //会员id
                    head: '', //头围
                    up_down: '', //上下
                    about: '', //左右
                    date: '', //最晚到店时间
                    urgent: '', //	加急
                    price: '', //	要货金额
                    style_id: '', //	款式ID
                    hairstyle_id: '', //	发型ID
                    series_id: '', //	系列ID
                    blank_type_id: '', //	毛坯种类ID
                    needle_type_id: '', //	递针类型ID
                    size_id: '', //	尺寸ID
                    length_id: '', //	长度ID
                    sex_id: '', //	性别ID
                    colour_id: '', //	颜色ID
                    pu_type: '', //	PU边类型（1不加，2前额+PU，3四周+PU，4其他）
                    pu_type_content: '', //	PU边类型说明
                    pu_thickness: '', //	PU边厚薄度（1薄PU，2NPU）
                    hair_quality: '', //	发质（1吃酸发，2印度发，3蛋白丝）
                    forehead: '', //	前额娃娃发（1不加，2加，3加F网（肉色），4加F网（黑色））
                    curvature: '', //	曲度
                    flow_to: '', //	流向（1背头，2刘海）
                    hair_volume: '', //	发量（%）
                    images: [], //	图片
                    remarks: '', //	备注
                    orders_id: '',
                },
                rules: {
                    two_type: { required: true, message: '请选择商品类型', trigger: 'change' },
                    type: { required: true, message: '请选择商品类型', trigger: 'change' },
                    series_id: { required: true, message: '请选择商品系列', trigger: 'change' },
                    blank_type_id: { required: true, message: '请选择毛坯种类', trigger: 'change' },
                    needle_type_id: { required: true, message: '请选择递针类型', trigger: 'change' },
                    size_id: { required: true, message: '请选择尺寸', trigger: 'change' },
                    length_id: { required: true, message: '请选择长度', trigger: 'change' },
                    sex_id: { required: true, message: '请选择性别', trigger: 'change' },
                    colour_id: { required: true, message: '请选择颜色', trigger: 'change' },
                    style_id: { required: true, message: '请选择款号', trigger: 'change' },
                    hairstyle_id: { required: true, message: '请选择发型', trigger: 'change' },
                    // images: { required: true, message: "请上传图片", trigger: "change" },
                    pu_type: { required: true, message: '请选择PU边类型', trigger: 'change' },
                    // pu_thickness: { required: true, message: "请选择PU边厚薄度", trigger: "change" },
                    hair_quality: { required: true, message: '请选择发质', trigger: 'change' },
                    forehead: { required: true, message: '请选择前额娃娃发', trigger: 'change' },
                    curvature: { required: true, message: '请输入曲度', trigger: 'blur' },
                    flow_to: { required: true, message: '请选择流向', trigger: 'change' },
                    hair_volume: { required: true, message: '请输入发量', trigger: 'blur' },
                    date: { required: true, message: '请选择最晚到店时间', trigger: 'change' },
                    urgent: { required: true, message: '请输入加急天数', trigger: 'blur' },
                    price: { required: true, message: '请输入要货金额', trigger: 'blur' },
                },
                series: [],
                blank_type: [],
                needle_type: [],
                size: [],
                length: [],
                sex: [],
                colour: [],
                hairstyle: [],
                style: [],
                vipUserList: [],
                dialogVisible3: false,
                dialogVisible1: false,
                dataList: [],
                selectOrder: {},
            };
        },
        created() {
            this.getGoodsCategory();
        },
        methods: {
            // 确认选择
            comfirm() {
                let arr = this.$refs.tab.selection;
                console.log(arr);
                if (!arr.length) {
                    return this.$message.warning('请选择订单');
                } else if (arr.length > 1) {
                    return this.$message.warning('只能选择一个订单');
                } else {
                    this.form.orders_id = arr[0].id;
                    this.selectOrder = arr[0];
                    this.dialogVisible1 = false;
                    console.log(this.form);
                }
            },
            // 取消选择
            cancel() {
                this.dialogVisible1 = false;
            },
            two_typeChange() {
                this.form.hairstyle_id = '';
                this.getGoodsCategory(this.form.two_type ? this.form.two_type : '1');
                this.form.date = ''; //最晚到店时间
                this.form.urgent = ''; //	加急
                this.form.price = ''; //	要货金额
                this.form.style_id = ''; //	款式ID
                this.form.hairstyle_id = ''; //	发型ID
                this.form.series_id = ''; //	系列ID
                this.form.blank_type_id = ''; //	毛坯种类ID
                this.form.needle_type_id = ''; //	递针类型ID
                this.form.size_id = ''; //	尺寸ID
                this.form.length_id = ''; //	长度ID
                this.form.sex_id = ''; //	性别ID
                this.form.colour_id = ''; //	颜色ID
                this.form.pu_type = ''; //	PU边类型（1不加，2前额+PU，3四周+PU，4其他）
                this.form.pu_type_content = ''; //	PU边类型说明
                this.form.pu_thickness = ''; //	PU边厚薄度（1薄PU，2NPU）
                this.form.hair_quality = ''; //	发质（1吃酸发，2印度发，3蛋白丝）
                this.form.forehead = ''; //	前额娃娃发（1不加，2加，3加F网（肉色），4加F网（黑色））
                this.form.curvature = ''; //	曲度
                this.form.flow_to = ''; //	流向（1背头，2刘海）
                this.form.hair_volume = ''; //	发量（%）
                this.form.images = []; //	图片
                this.form.remarks = ''; //	备注
            },
            puChange() {
                if (this.form.pu_type == 1) {
                    this.form.pu_thickness = '';
                    this.pu_type_content = '';
                } else if (this.form.pu_type == 2 || this.form.pu_type == 3) {
                    this.pu_type_content = '';
                }
            },
            // 百分比
            hairBlur() {
                this.form.hair_volume = Math.abs(this.form.hair_volume);
                if (this.form.hair_volume > 100) {
                    this.form.hair_volume = 100;
                }
            },
            // 金额校验
            priceBlur() {
                this.form.price = Math.abs(this.form.price).toFixed(2);
            },
            // 数量校验
            urgentBlur() {
                this.form.urgent = parseInt(Math.abs(this.form.urgent));
            },
            // 获取分类
            async getGoodsCategory(special_type) {
                let { code, data } = await this.$Http.getGoodsCategoryList({ special_type });
                if (code) {
                    this.series = data.series;
                    this.blank_type = data.blank_type;
                    this.needle_type = data.needle_type;
                    this.size = data.size;
                    this.length = data.length;
                    this.sex = data.sex;
                    this.colour = data.colour;
                    this.hairstyle = data.hairstyle;
                    this.style = data.style;
                }
            },

            async affirmUser(user) {
                this.user = user;
                this.form.user_id = user.id;
                this.form.head = user.header;
                this.form.up_down = user.around;
                this.form.about = user.about;
                this.form.orders_id = ''; // 每次选择清空已选订单
                let { code, data } = await this.$Http.getOrdinaryUser({
                    type: 1,
                    user_id: user.id,
                });
                if (code) {
                    if (data && data.length) {
                        this.dataList = data;
                        this.dialogVisible1 = true;
                    } else {
                        this.$message.warning('没有查询到相关的订单信息');
                    }
                }
            },
            async getUserSearch() {
                if (!this.keys || this.isBtn2) return;
                this.isBtn2 = true;
                let { code, data } = await this.$Http.getUserSearch({ keys: this.keys });
                this.isBtn2 = false;
                if (code && data) {
                    this.dialogVisible3 = true;
                    this.vipUserList = data;
                } else this.$message.warning('没有查询到相关的用户信息');
            },
            subitm() {
                this.$refs['form'].validate(async (valid) => {
                    if (!valid) return;
                    if (!this.form.user_id && this.form.type == 1) {
                        return this.$message.warning('请选择顾客信息');
                    }
                    let obj = Object.assign({}, this.form);
                    obj.images = obj.images.join(',');
                    obj.is_stock = obj.type;
                    delete obj.type;
                    this.isBtn = true;
                    let { code } = await this.$Http.specialSave(obj);
                    this.isBtn = true;
                    if (code) {
                        this.$message.success('添加成功!');
                        this.utils.backPage();
                    }
                });
            },
        },
    };
</script>

<style>
    .disabled .el-upload--picture-card {
        display: none !important;
    }
</style>
<style lang="scss" scoped>
    ::v-deep {
        .el-input {
            .el-input-group__append {
                padding: 0;
            }
        }
    }
    .search-right {
        padding: 0 20px;
        box-sizing: content-box;
        line-height: 38px;
        cursor: pointer;
        &:hover {
            background: #eceded;
            transition: all 0.3s;
        }
    }
    .orderStatus {
        padding: 40px 40px;
        display: flex;
        align-items: center;

        .left_order_status {
            display: flex;
            align-items: center;

            > span {
                margin-left: 30px;
                font-size: 22px;
                color: red;
            }
        }

        .right_money {
            margin-left: auto;
            display: flex;
            align-items: center;

            > div {
                display: flex;
            }

            > div:first-child {
                margin-right: 40px;
                color: red;
            }
        }
    }

    .tit {
        margin: 20px 0;
        font-size: 16px;
        font-weight: 700;
    }

    .money {
        display: flex;
        flex-direction: column;

        > div {
            padding: 0 40px;
            margin-top: 10px;
            text-align: right;
        }
    }

    .order_info {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;

        > div {
            display: flex;
            align-items: center;

            > span {
                width: 150px;
            }
        }
    }

    .timer_body {
        display: flex;
        flex-wrap: wrap;
        margin: 40px 0;
        padding: 20px 40px;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        border-radius: 4px;
        min-height: 300px;

        .set_timer_info {
            cursor: pointer;
            &:hover {
                color: #409eff;
                background: #ecf5ff;
                border-color: #b3d8ff;
                transition: all 0.4s;
            }
        }

        .timer_info {
            margin: 10px 33px;
            padding: 8px 0;
            width: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid rgba($color: #000000, $alpha: 0.1);
            border-radius: 8px;

            > div:first-child {
                font-size: 14px;
            }

            > div:last-child {
                font-size: 12px;
                margin-top: 5px;
            }
        }

        .active-time {
            color: #409eff;
            background: #ecf5ff;
            border-color: #b3d8ff;
        }

        .n_select {
            cursor: not-allowed;
            background-color: rgba($color: #000000, $alpha: 0.2);
        }
    }

    .kong {
        margin: 10px 20px;
        padding: 8px 0;
        width: 120px;
    }

    .vs-bottom-btns {
        justify-content: left;
    }
</style>
